<template>
  <div class="unreconciled">
    <!-- 销售任务进度达成 -->
    <!-- <div id="info" :class="{loaded}">
      <div class="item left">123123</div></div> -->
    <div v-for="(item, index) in chartData" :key="index" class="unreconciled-item">
      <div id="info" :class="{loaded}">
        <div class="item left">
          <el-progress :text-inside="true" :stroke-width="24" :percentage="item.assignment_rate" :color="customColors"
          :format="
          () =>
            index +
            1 +
            ' ' +
            item.sale_id_name +
            ' ' +
            item.assignment_rate +
            '%'
        "></el-progress>
        </div>
     
      </div>

    </div>
  </div>
</template>

<script>
  import { getChartData } from "@/api/echarts";

  export default {
    name: "regionTaskReach",
    components: {},
    props: [],
    data() {
      return {
        chartData: [],
        customColors: [
          { color: "#ee6666", percentage: 30 },
          { color: "#fac858", percentage: 60 },
          { color: "#73c0de", percentage: 90 },
          { color: "#91cc75", percentage: 100 },
        ],
        loaded:false
      };
    },
    mounted() {
      getChartData({ custom_chart_id: "29" }).then((res) => {
        const data = res.data.data.data;
        data.forEach((item) => {
          item.assignment_rate = item.assignment_rate.slice(0, -1);
          item.assignment_rate = item.assignment_rate * 1;
        });
        data.sort((a, b) => b.assignment_rate - a.assignment_rate);
        this.chartData = data.slice(0, 10);
        setTimeout(() => {
            this.loaded = true
            console.log(this.loaded,"loaded")
          }, 100)
      });
    },
    methods: {},
  };
</script>
<style lang="scss" scoped>
  ::v-deep .el-progress-bar__inner {
    text-align: start;
  }

  .unreconciled {
    width: 100%;
    overflow: hidden;
    // display: flex;
    height: 270px;
    padding-top: 30px;
  }
  .item  {
    width: 100%;
  }
  .left  {
    transform: translateX(-100%);
    transition: transform 500ms ease-in;
  }
  #info.loaded .left {
    transform: translateX(0);
  }
  .unreconciled-item {
    //   display: flex;
    //   justify-content: space-between;
    //   color: #323232;
    //   font-size: 14px;
    // font-weight: bold;
    height: 40px;

    padding-right: 0 20px;

    .left-con {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .right-num {
      display: flex;
      width: 120px;
      justify-content: flex-end;
    }

    .ind {
      background-image: linear-gradient(to right,
          rgb(157, 191, 239),
          rgb(70, 109, 236));
      color: transparent;
      -webkit-background-clip: text;
      font-style: italic;
      color: rgb(64, 158, 255);
      font-size: 13px;
      font-weight: bold;
    }

    .name {}

    .val {
      margin-right: 3px;
      font-weight: bold;

      /deep/.con {
        justify-content: flex-end;
      }

      /deep/.con .number {
        font-size: 14px;
        line-height: 30px;
      }
    }

    .unit {
      color: #555;
      font-size: 12px;
    }
  }
</style>